import { useRef, useEffect, useState } from 'react';
import type { ProFormInstance } from '@ant-design/pro-form';
import { ModalForm } from '@ant-design/pro-form';
import Field from '@ant-design/pro-field';
import type { ProFieldFCMode } from '@ant-design/pro-utils';
import { Modal, Button } from 'antd';

type propsType = {
  title: string;
  url: string;
};

export default (props: propsType) => {
  const formRef = useRef<ProFormInstance>();
  const [state, setState] = useState<ProFieldFCMode>('read');
  const [plain, setPlain] = useState<boolean>(false);
  const [visible, Setvisible] = useState(false);
  const showModal = () => {
    Setvisible(true);
  };
  const handleOk = (e) => {
    Setvisible(false);
  };
  const handleCancel = (e) => {
    Setvisible(false);
  };

  return (
    <div className="MyComponent">
      {/* <ModalForm
        title={props.title}
        formRef={formRef}
        trigger={<a>{props.title}</a>}
        autoFocusFirstInput
        onFinish={async (values) => {
          return true;
        }}
      >
        <Field
          text="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
          valueType="image"
          mode={state}
          plain={plain}
        />
      </ModalForm> */}

      <a onClick={showModal}>{props.title}</a>
      <Modal title={props.title} visible={visible} onOk={handleOk} onCancel={handleCancel}>
        点击查看:
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Field text={props.url} valueType="image" mode={state} plain={plain} />
        </div>
      </Modal>
    </div>
  );
};
